<template>
	<div class="xitongpeizhi" style="padding:0.8rem 0.5rem 1rem; background: #fff; min-height: 100vh; position: relative;">
    <div style="color: rgb(2, 12, 29); font-size: 0.36rem;text-align: center;">更换手机号</div>
    <div style="color: rgb(64, 66, 71); font-size: 0.28rem; text-align: center; margin: 20px 0 50px;">一个手机只能绑定一个帐号，更换后可使用新手机号登录此帐号。对于已绑定其他账号的手机号，本次操作后将与原帐号解绑。</div>
    <div style="border-bottom: 1px solid #ebedf0; border-top: 1px solid #ebedf0;">
      <van-field v-model="diqu" is-link readonly name="picker" label="国家/地区" @click="showPicker = true"/>
    </div>
    <div style="border-bottom: 1px solid #ebedf0; ">
      <van-field v-model="all.mobile" type="tel" placeholder="请输入手机号" label="手机号" ></van-field>
    </div>
    <div style="border-bottom: 1px solid #ebedf0; position: relative; ">
      <van-field v-model="all.sms_code" type="tel" placeholder="请输入验证码" label="验证码" />
      <div @click="getcode" style="position: absolute; right: 10px; top: 15px; font-size: 12px;">{{ codemsg }}</div>
    </div>

    <div @click="genghuan" style="background: rgb(0, 90, 255); color: #fff; height: 0.9rem; border-radius:0.5rem; font-size: 0.38rem; position: absolute; bottom: 0.5rem; width: 6.5rem; left: 0.5rem;" class="flexcc">确定</div>

    <van-popup v-model:show="showPicker" position="bottom" >
      <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" show-toolbar />
    </van-popup>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'huanshoujihao',
		data() {
			return {
        diqu:"中国大陆",
        all:{
          mobile:""
        },
        columns:['中国大陆'],
        showPicker:false,

        codemsg:'获取验证码',
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
      onConfirm:function(val){
        this.diqu = val
        this.showPicker = false
      },

      genghuan:function(){
        axios.post('/agent/reseller/change/bind',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            vant.Toast('操作成功');
            this.$router.back(-1)
        	} else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },

      //获取验证码
      getcode(){
        if(this.all.mobile.length != 11){
          vant.Toast('请输入手机号');
          return false
        }
      	if(this.codemsg=='获取验证码'){
      		this.codemsg = 60

      		var time = setInterval(()=>{
      			if(this.codemsg>0){
      				this.codemsg--
      			}else{
      				this.codemsg = '获取验证码'
      				clearInterval(time)
      			}
      		},1000)

      		axios.post('/api/user/change/bind/code/send',{
      			mobile:this.all.mobile,
      		}).then((response)=>{
      			if (response.data.msg.code == 0) {
      		    vant.Toast('发送成功');
      			} else {
      		    vant.Toast(response.data.msg.info);
      			}
      		})
      	}

      }

		}
	}
</script>


<style scoped lang="less">

</style>
